<template>
  <div class="index">
    <div class="clearfix header">
      <div class="fl">
        <i class="iconfont iconrenminbi f20  c1 v-middle"></i>
        
        账户余额：
        <span class="c4">4900.00</span>
        元
      </div>
      <div class="fr mt10">
        <Button type="primary" size="small">充值</Button>
        <!-- <Button type="primary" size="small" ghost>提现</Button> -->
      </div>
    </div>
    
    <div class="mt20">
      <ul class="cards" >
        <li :class="'theme-'+i" v-for="(item, i) in list" :key="i">
          <div class="card-header">{{item.title}}</div>
          <div class="card-content">
            <div class="f20 card-money">{{item.money | fixedMoney}}</div>
            <div class="mt10 c3 f12">{{item.desc}}</div>
          </div>
          <div class="card-footer f12 clearfix">
            <span class="fl">{{item.month}}</span>
            <span class="fr">{{item.history}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return{
        position:[
          {title: '财务管理', link:'/admin/moneyManage'},
          {title: '账户总览'}
        ],
        list:[
          {title: '账户收支', money: '82300.88', desc: '账户余额', month: '本月账户明细', history:'历史账户明细'},
          {title: '产品', money: '13880.88', desc: '消费明细汇总', month: '本月消费金额', history:'历史消费金额'},
          {title: '软件订单', money: '9330.88', desc: '订单累计金额', month: '本月订单金额', history:'历史订单金额'},
          {title: '其他支付', money: '12033.938', desc: '收支合计', month: '本月收支合计', history:'历史收支合计'},
          {title: '云服务', money: '883330.88', desc: '消费明细汇总', month: '本月消费金额', history:'历史消费金额'},
          {title: '硬件订单', money: '72320.88', desc: '订单累计金额', month: '本月订单金额', history:'历史订单金额'},
        ]
      }
    },
    mounted () {
      this.$store.commit('UPDATE_POSITION', this.position)
    },
  }
</script>

<style lang="less" scoped>
  
  .header{
    background: #f2f2f2;
    padding: 14px;
    .fl{
      line-height: 2;
      font-size: 18px;
    }
  }
  .cards{
    overflow: hidden;
    li{
      float: left;
      width: 260px;
      margin-right: 20px;
      margin-bottom: 30px;
      border:1px solid #f2f2f2;
      border-radius: 4px;
      .card-header{
        background: #147de6;
        color: #fff;
        font-size: 14px;
        line-height: 2;
        padding: 0 10px;
      }
      .card-content{
        padding: 10px 70px;
        text-align: left;
        .card-money{
          padding:50px 0 0;
          color: #147de6;
        }
      }
      .card-footer{
        padding: 20px;
      }
      &.theme-0{
        
      }
      &.theme-1{
        .card-header{background: #fcb049;}
        .card-money{color: #fcb049;}
      }
      &.theme-2{
        .card-header{background: #20b7ee;}
        .card-money{color: #20b7ee;}
      }
      &.theme-3{
        .card-header{background: #f46e71;}
        .card-money{color: #f46e71;}
      }
      &.theme-4{
        .card-header{background: #25d9c9;}
        .card-money{color: #25d9c9;}
      }
      &.theme-5{
        .card-header{background: #5565e5;}
        .card-money{color: #5565e5;}
      }
    }
  }
</style>
